<template>
  <div class="item-container-box">
    <img class="item-img" :src="item.picUrl" alt="">
    <div class="item-message">
      <p class="item-name">{{ item.name }}</p>
      <svg @click="userWantToPlay" class="icon" aria-hidden="true">
        <use xlink:href="#icon-bofang"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import '@/assets/font/recommend'

export default {
  name: "RecommendItemImg",
  data() {
    return {
      playListItem: {
        id: '',
        name: '',
        theUrl: '',
        picUrl: '',
        artists: [],
      }
    }
  },
  props: {//接收图片数据
    item: {
      type: Object,
      required: true
    },
  },
  methods: {
    async userWantToPlay() {//当用户点击歌曲展示窗口的播放按钮时
      console.log(this.item.type)
      await this.$store.dispatch('player/addSongMessage', this.item)//向vuex发起请求，同时将用户点击所对应的item传递过去
      this.bus.$emit('userWantPlay')//同时向播放器发送用户想要播放的信息
    },
  }
}
</script>

<style scoped lang="less">
.item-container-box {
  position: relative;
  overflow: hidden;
  
  .item-img {
    height: 100%;
    width: 100%;
  }
  
  .item-message {
    position: absolute;
    bottom: -42px;
    width: 100%;
    height: 42px;
    background-color: #000000;
    color: #AEAEAE;
    opacity: 0;
    transition: all .3s linear;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .item-name {
      margin-left: 5px;
      font-size: 14px;
      height: 42px;
      line-height: 42px;
      width: 70%;
      transition: all .2s linear;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      
      &:hover {
        color: #ffffff;
      }
    }
    
    .icon {
      font-size: 2em;
      cursor: pointer;
    }
  }
  
  &:hover {
    .item-message {
      bottom: 0;
      opacity: .75;
    }
  }
  
}

</style>
